<template>
  <div class="myInfo">
    <div class="headerBox">
      <van-nav-bar
        title="个人资料"
        left-arrow
        @click-left="onClickLeft"
      ></van-nav-bar>
    </div>
    <div class="com_box">
      <div class="samll_box" style="height:1.36rem">
        <p style="width:5.2rem;height: 1.12rem;line-height: 1rem;">头像</p>
        <van-uploader :after-read="onRead">
          <img :src="userInfo.head" style="display: inline-block;border-radius: 50%;">
        </van-uploader>
        <i class="jt" style="top: .3rem;"></i>
      </div>
      <div class="samll_box">
        <p>用户ID</p>
        <span class="text">{{userInfo.id}}</span>
      </div>
      <div class="samll_box">
        <p>用户名</p>
        <span class="text">{{userInfo.username}}</span>
      </div>
      <div class="samll_box">
        <p style="width: 4rem;">手机号</p>
        <span style="color:#999999;display: inline-block;width: .8rem;" @click="goSetIphone">{{userInfo.tel?setIphone(userInfo.tel): ''}}</span>
        <i class="jt"></i>
      </div>
      <div class="samll_box">
        <p>姓名</p>
        <span class="text">{{userInfo.inside_user_real_name? formatName(userInfo.inside_user_real_name) : ''}}</span>
      </div>
      <div class="samll_box">
        <p>身份证号</p>
        <span class="text">{{userInfo.inside_user_id_card_no? formatCord(userInfo.inside_user_id_card_no) : ''}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo:{} 
    };
  },
  created() {
    this.setUserInfo()
  },
  methods: {
    // 上传图片
    async onRead(val){
      let file = val.file
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isLt2M) {
        this.$toast("上传图片大小不能超过 20MB!");
      }
      console.log(file)
      let myform = new FormData();
      myform.append("file", file);
      let res = await this.$http.ossImg(myform);
      if (res) {
        console.log(res)
        this.userInfo.head = res.data.src
        let repone = await this.$http.updateUserHead({
          head: res.data.src
        });
        console.log(repone)
        if (repone) {
          this.$toast("头像更换成功");
          this.$router.push({name: 'myCenter'})
        }
      }
    },
    formatCord(cord){
      return cord.replace(/^(.{4})(?:\d+)(.{4})$/,"$1******$2")
    },
    formatName(str) {
      return str.replace(/([\u4E00-\u9FA5]{1})([\u4E00-\u9FA5]+)$/,"$1**");
    },
    setIphone(tel) {
      var reg = /^(\d{3})\d{4}(\d{4})$/;
      return tel.replace(reg, "$1****$2")
    },
    async setUserInfo() {
      let self = this
      let res = await this.$http.getUserInfo()
      if (res) {
        console.log(res)
        this.userInfo = res.data
      }
    },
    onClickLeft() {
      this.$router.push({name: 'myCenter'})
    },
    goSetIphone() {
      this.$router.push({name: 'myIphone',query: {tel: this.userInfo.tel}})
    }
  },
};
</script>
<style scoped>
.samll_box{
  width: 100%;
  height: .96rem;
  padding: .24rem .4rem .24rem .29rem;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
  background: #fff;
  line-height: .5rem;
}
.samll_box img{
  width: .96rem;
  height: .96rem;
}
.samll_box .text{
  color: #000;
  font-weight: bold;
}
.samll_box p{
  width: 3.6rem;
  height: .48rem;
  line-height: .48rem;
  color: #333333;
  font-size: .29rem;
}
.samll_box .jt{
  display: inline-block;
  width: .3rem;
  height: .3rem;
  background: url('../../assets/img/user/right.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: .1rem;
}
</style>
